<template>
	<view class="u-p-20">
		<u-form :model="form" ref="uForm" label-width='150'>
			<u-form-item label="收货人" prop="name">
				<u-input v-model="form.name" placeholder='请填写收货人姓名' />
			</u-form-item>
			<u-form-item label="手机号码" prop="tel">
				<u-input v-model="form.tel" placeholder='请填写收货人手机号' />
			</u-form-item>
			<u-form-item label="所在地区" prop="address">
				<u-input v-model="form.address" placeholder='省市区县、乡镇等' disabled @click='show=true' />
			</u-form-item>
			<u-form-item label="详细地址" prop="addressDetail">
				<u-input v-model="form.addressDetail" type='textarea' placeholder='街道、楼牌等' />
			</u-form-item>
			<u-form-item label-width='200' label="设置默认地址" :border-bottom='false'>
				<u-switch slot="right" v-model="form.isDefault==0?false:true" active-value="0" inactive-value="1"
					@change='change'>
				</u-switch>
			</u-form-item>
			<view class="u-border-bottom u-p-b-20 u-font-22">
				提醒：每次下单会默认推荐该地址
			</view>
		</u-form>
		<u-button class='u-m-t-40' type="error" shape="circle" @click="submit">保存</u-button>
		<u-button class='u-m-t-40' shape="circle" @click="del" v-if='isChange'>删除</u-button>
		<u-picker v-model="show" mode="region" @confirm='confirm'></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		addressSave,addressAddress,addressDelete
	} from '@/api/shop.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				show: false,
				isChange: false,
				id:'',
				form: {
					name: '',
					tel: '',
					address: '',
					addressDetail: '',
					isDefault: 0
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					tel: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					address: [{
						required: true,
						message: '请选择地区',
						trigger: ['change', 'blur']
					}],
					addressDetail: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['change', 'blur']
					}]
				}
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
				this.isChange = true
				this.addressAddress(e.id)
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			del(){
				uni.showModal({
				    title: '提示',
				    content: '确定要删除该地址',
				    success: (res)=> {
				        if (res.confirm) {
				            addressDelete({
											id:this.id,
											JSESSIONID: uni.getStorageSync('sessionid')
										}).then(res=>{
											this.$refs.uToast.show({
												title: '删除成功',
												type: 'success',
												back: true
											})
										})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			addressAddress(id){
				addressAddress({
					id,
					JSESSIONID: uni.getStorageSync('sessionid'),
					idUser: this.userInfo.id
				}).then(res=>{
					console.log(res);
					this.form = {
						...res,
						address: res.province + '-' + res.city + '-' + res.district,
					}
				})
			},
			change(val) {
				this.form = {
					...this.form,
					isDefault: val
				}
			},
			confirm(e) {
				this.form = {
					...this.form,
					province: e.province.label,
					city: e.city.label,
					district: e.area.label,
					address: e.province.label + '-' + e.city.label + '-' + e.area.label,
					areaCode: e.area.value
				}
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						const query = {
							...this.form,
							JSESSIONID: uni.getStorageSync('sessionid'),
							idUser: this.userInfo.id
						}
						delete query.address
						addressSave(query).then(res => {
							let title = '新增成功'
							if(this.isChange){
								title = '修改成功'
							}
							this.$refs.uToast.show({
								title: title,
								type: 'success',
								back: true
							})
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style>

</style>
